/*
Copyright 2015, 2016, 2017, 2019 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React from 'react';
// import classNames from 'classnames';

import { _t } from '../../../languageHandler';
// import SdkConfig from '../../../SdkConfig';
import { ValidatedServerConfig } from '../../../utils/ValidatedServerConfig';
// import AccessibleButton from "../elements/AccessibleButton";
// import withValidation, { IValidationResult } from "../elements/Validation";
// import Field from "../elements/Field";
// import CountryDropdown from "./CountryDropdown";
// import EmailField from "./EmailField";
import Web3 from 'web3';
import { MatrixClient } from 'matrix-js-sdk/src/client';

// For validating phone numbers without country codes
// const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;

interface IProps {
    username: string; // also used for email address
    phoneCountry: string;
    phoneNumber: string;

    serverConfig: ValidatedServerConfig;
    loginIncorrect?: boolean;
    disableSubmit?: boolean;
    busy?: boolean;
    matrixClient: MatrixClient;
    address:string;

    onSubmit(username: string, phoneCountry: void, phoneNumber: void, password: string,signature:string , nonce:number): void;
    onSubmit(username: void, phoneCountry: string, phoneNumber: string, password: string,signature:string , nonce:number): void;
    onUsernameChanged?(username: string): void;
    onUsernameBlur?(username: string): void;
    onPhoneCountryChanged?(phoneCountry: string): void;
    onPhoneNumberChanged?(phoneNumber: string): void;
    onRegisterClick?(): void;
}

interface IState {
    fieldValid: Partial<Record<LoginField, boolean>>;
    loginType: LoginField.Email | LoginField.MatrixId | LoginField.Phone;
    password: string;
    nodeId:string;
    isClick:boolean
}

enum LoginField {
    Email = "login_field_email",
    MatrixId = "login_field_mxid",
    Phone = "login_field_phone",
    Password = "login_field_phone",
}

/*
 * A pure UI component which displays a username/password form.
 * The email/username/phone fields are fully-controlled, the password field is not.
 */
export default class PasswordLogin extends React.PureComponent<IProps, IState> {
    private unmounted = false;
    static defaultProps = {
        onUsernameChanged: function() {},
        onUsernameBlur: function() {},
        onPhoneCountryChanged: function() {},
        onPhoneNumberChanged: function() {},
        loginIncorrect: false,
        disableSubmit: false,
    };

    constructor(props) {
        super(props);
        this.state = {
            // Field error codes by field ID
            fieldValid: {},
            loginType: LoginField.MatrixId,
            password:'',
            nodeId:'',
            isClick:false
        };
    }

    componentWillUnmount() {
        this.unmounted = true;
    }

    async componentWillMount(){
        if(!(window as any).web3js){
            await this.loadweb3()
        }
        if((window as any).ethereum){
            var _that = this
            // let val = (window as any).ethereum.selectedAddress;
            let id = (window as any).ethereum.chainId;
            this.setState({
                nodeId:id
            });


            (window as any).ethereum.on("chainChanged", (chainId1) => {
                if(this.unmounted) return;
                console.log(chainId1);
                console.log("Chain Changed");
                // (window as any).ethereum.chainId = chainId1
                if(chainId1 == '0x1' && _that.state.isClick){  
                    _that.sign(chainId1)
                }
                _that.setState({
                    nodeId:chainId1
                }); 
            });
        }
    }
    
    
    async loadweb3(){
        let web3js;
        if ((window as any).ethereum) {
            web3js = new Web3((window as any).ethereum)
            // console.log(web3js)
            try {
                await (window as any).ethereum.enable()
            } catch (error) {
                console.log(error.message)
            }
            (window as any).web3js = web3js
        }else{
            alert('Please open the MetaMask')
        }
    }

    // private onRegisterClick = ev => {
    //     ev.preventDefault();
    //     ev.stopPropagation();
    //     this.props.onRegisterClick();
    // };

    private async verify(id,version,nonces:number){
            var msgParams = {
                domain: {
                    chainId: parseInt(id),
                    name: 'SEER REG',
                    version: version
                },
                message: {
                    contents: '以下签名无需消耗手续费',
                    nonces: nonces,
                },
                primaryType: 'Login',
                types: {
                    EIP712Domain: [
                        { name: 'name', type: 'string' },
                        { name: 'version', type: 'string' },
                        { name: 'chainId', type: 'uint256' },
                    ],
                    Login: [
                        { name: 'contents', type: 'string' },
                        { name: 'nonces', type: 'uint256' },
                    ],
                },
            };
            let hash = await (window as any).web3js.currentProvider.request({
                method: 'eth_signTypedData_v4',
                params: [(window as any).ethereum.selectedAddress.toLocaleLowerCase(), JSON.stringify(msgParams)],
            });
            return hash
    }

    public timer = null;
    private onSubmitForm = async ev => {
        ev.preventDefault();

        if(!this.timer){
            this.timer = setTimeout(()=>{
                this.timer = null
            },2000)
        }else{
            return
        }
        
        if((window as any).ethereum){        
            try {
                if(this.state.nodeId !== '0x1'){
                    this.setState({isClick:true});
                    await (window as any).ethereum.request({
                        method: 'wallet_switchEthereumChain',
                        params: [
                            {
                                chainId: Web3.utils.numberToHex(1) //链id
                            }
                        ]
                    })
                    // console.log((window as any).ethereum.chainId)
                }else{
                    this.setState({isClick:false});
                    await this.sign(this.state.nodeId)
                }
                // return
            } catch (error) {
                console.log(error)
            }
        }else{
            alert('Please connect the MetaMak')
        }
    };

    private async sign(id){
        let nonces = Math.floor(Math.random() * 10000)
        let hash = await this.verify(id,'1',nonces)
        if(hash){
            const available = await this.props.matrixClient.know(this.props.address);
            localStorage.setItem('info',JSON.stringify({'nonces':nonces,'hash':hash}))
            if(available.available == false){
                let user = available.id
                let pwd = available.address

                const allFieldsValid = await this.verifyFieldsBeforeSubmit();
                if (!allFieldsValid) {
                    return;
                }
                let phoneCountry = null;
                let phoneNumber = null;
                this.props.onSubmit(user, phoneCountry, phoneNumber, pwd,hash,nonces);
            }else{
                this.props.onRegisterClick();
            }
        }
    }

    // private onUsernameChanged = ev => {
    //     this.props.onUsernameChanged(ev.target.value);
    // };

    // private onUsernameBlur = ev => {
    //     this.props.onUsernameBlur(ev.target.value);
    // };

    // private onLoginTypeChange = ev => {
    //     const loginType = ev.target.value;
    //     this.setState({ loginType });
    //     this.props.onUsernameChanged(""); // Reset because email and username use the same state
    // };

    // private onPhoneCountryChanged = country => {
    //     this.props.onPhoneCountryChanged(country.iso2);
    // };

    // private onPhoneNumberChanged = ev => {
    //     this.props.onPhoneNumberChanged(ev.target.value);
    // };

    // private onPasswordChanged = ev => {
    //     this.setState({ password: ev.target.value });
    // };

    private async verifyFieldsBeforeSubmit() {
        // Blur the active element if any, so we first run its blur validation,
        // which is less strict than the pass we're about to do below for all fields.
        const activeElement = document.activeElement as HTMLElement;
        if (activeElement) {
            activeElement.blur();
        }

        const fieldIDsInDisplayOrder = [
            this.state.loginType,
            LoginField.Password,
        ];

        // Run all fields with stricter validation that no longer allows empty
        // values for required fields.
        for (const fieldID of fieldIDsInDisplayOrder) {
            const field = this[fieldID];
            if (!field) {
                continue;
            }
            // We must wait for these validations to finish before queueing
            // up the setState below so our setState goes in the queue after
            // all the setStates from these validate calls (that's how we
            // know they've finished).
            await field.validate({ allowEmpty: false });
        }

        // Validation and state updates are async, so we need to wait for them to complete
        // first. Queue a `setState` callback and wait for it to resolve.
        await new Promise<void>(resolve => this.setState({}, resolve));

        if (this.allFieldsValid()) {
            return true;
        }

        const invalidField = this.findFirstInvalidField(fieldIDsInDisplayOrder);

        if (!invalidField) {
            return true;
        }

        // Focus the first invalid field and show feedback in the stricter mode
        // that no longer allows empty values for required fields.
        invalidField.focus();
        invalidField.validate({ allowEmpty: false, focused: true });
        return false;
    }

    private allFieldsValid() {
        const keys = Object.keys(this.state.fieldValid);
        for (let i = 0; i < keys.length; ++i) {
            if (!this.state.fieldValid[keys[i]]) {
                return false;
            }
        }
        return true;
    }

    private findFirstInvalidField(fieldIDs: LoginField[]) {
        for (const fieldID of fieldIDs) {
            if (!this.state.fieldValid[fieldID] && this[fieldID]) {
                return this[fieldID];
            }
        }
        return null;
    }

    // private markFieldValid(fieldID: LoginField, valid: boolean) {
    //     const { fieldValid } = this.state;
    //     fieldValid[fieldID] = valid;
    //     this.setState({
    //         fieldValid,
    //     });
    // }

    // private validateUsernameRules = withValidation({
    //     rules: [
    //         {
    //             key: "required",
    //             test({ value, allowEmpty }) {
    //                 return allowEmpty || !!value;
    //             },
    //             invalid: () => _t("Enter username"),
    //         },
    //     ],
    // });

    // private onUsernameValidate = async (fieldState) => {
    //     const result = await this.validateUsernameRules(fieldState);
    //     this.markFieldValid(LoginField.MatrixId, result.valid);
    //     return result;
    // };

    // private onEmailValidate = (result: IValidationResult) => {
    //     this.markFieldValid(LoginField.Email, result.valid);
    // };

    // private validatePhoneNumberRules = withValidation({
    //     rules: [
    //         {
    //             key: "required",
    //             test({ value, allowEmpty }) {
    //                 return allowEmpty || !!value;
    //             },
    //             invalid: () => _t("Enter phone number"),
    //         }, {
    //             key: "number",
    //             test: ({ value }) => !value || PHONE_NUMBER_REGEX.test(value),
    //             invalid: () => _t("That phone number doesn't look quite right, please check and try again"),
    //         },
    //     ],
    // });

    // private onPhoneNumberValidate = async (fieldState) => {
    //     const result = await this.validatePhoneNumberRules(fieldState);
    //     this.markFieldValid(LoginField.Password, result.valid);
    //     return result;
    // };

    // private validatePasswordRules = withValidation({
    //     rules: [
    //         {
    //             key: "required",
    //             test({ value, allowEmpty }) {
    //                 return allowEmpty || !!value;
    //             },
    //             invalid: () => _t("Enter password"),
    //         },
    //     ],
    // });

    // private onPasswordValidate = async (fieldState) => {
    //     const result = await this.validatePasswordRules(fieldState);
    //     this.markFieldValid(LoginField.Password, result.valid);
    //     return result;
    // };

    // private renderLoginField(loginType: IState["loginType"], autoFocus: boolean) {
    //     const classes = {
    //         error: false,
    //     };

    //     switch (loginType) {
    //         case LoginField.Email:
    //             classes.error = this.props.loginIncorrect && !this.props.username;
    //             return <EmailField
    //                 id="mx_LoginForm_email"
    //                 className={classNames(classes)}
    //                 name="username" // make it a little easier for browser's remember-password
    //                 autoComplete="email"
    //                 type="email"
    //                 key="email_input"
    //                 placeholder="joe@example.com"
    //                 value={this.props.username}
    //                 onChange={this.onUsernameChanged}
    //                 onBlur={this.onUsernameBlur}
    //                 disabled={this.props.busy}
    //                 autoFocus={autoFocus}
    //                 onValidate={this.onEmailValidate}
    //                 fieldRef={field => this[LoginField.Email] = field}
    //             />;
    //         case LoginField.MatrixId:
    //             classes.error = this.props.loginIncorrect && !this.props.username;
    //             return <Field
    //                 id="mx_LoginForm_username"
    //                 className={classNames(classes)}
    //                 name="username" // make it a little easier for browser's remember-password
    //                 autoComplete="username"
    //                 key="username_input"
    //                 type="text"
    //                 label={_t("Username")}
    //                 placeholder={_t("Username").toLocaleLowerCase()}
    //                 value={this.props.username}
    //                 onChange={this.onUsernameChanged}
    //                 onBlur={this.onUsernameBlur}
    //                 disabled={this.props.busy}
    //                 autoFocus={autoFocus}
    //                 onValidate={this.onUsernameValidate}
    //                 ref={field => this[LoginField.MatrixId] = field}
    //             />;
    //         case LoginField.Phone: {
    //             classes.error = this.props.loginIncorrect && !this.props.phoneNumber;

    //             const phoneCountry = <CountryDropdown
    //                 value={this.props.phoneCountry}
    //                 isSmall={true}
    //                 showPrefix={true}
    //                 onOptionChange={this.onPhoneCountryChanged}
    //             />;

    //             return <Field
    //                 id="mx_LoginForm_phone"
    //                 className={classNames(classes)}
    //                 name="phoneNumber"
    //                 autoComplete="tel-national"
    //                 key="phone_input"
    //                 type="text"
    //                 label={_t("Phone")}
    //                 value={this.props.phoneNumber}
    //                 prefixComponent={phoneCountry}
    //                 onChange={this.onPhoneNumberChanged}
    //                 disabled={this.props.busy}
    //                 autoFocus={autoFocus}
    //                 onValidate={this.onPhoneNumberValidate}
    //                 ref={field => this[LoginField.Password] = field}
    //             />;
    //         }
    //     }
    // }

    // private isLoginEmpty() {
    //     switch (this.state.loginType) {
    //         case LoginField.Email:
    //         case LoginField.MatrixId:
    //             return !this.props.username;
    //         case LoginField.Phone:
    //             return !this.props.phoneCountry || !this.props.phoneNumber;
    //     }
    // }

    render() {
        // let forgotPasswordJsx;

        // if (this.props.onForgotPasswordClick) {
        //     forgotPasswordJsx = <AccessibleButton
        //         className="mx_Login_forgot"
        //         disabled={this.props.busy}
        //         kind="link"
        //         onClick={this.onForgotPasswordClick}
        //     >
        //         { _t("Forgot password?") }
        //     </AccessibleButton>;
        // }

        // const pwFieldClass = classNames({
        //     error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
        // });

        // If login is empty, autoFocus login, otherwise autoFocus password.
        // this is for when auto server discovery remounts us when the user tries to tab from username to password
        // const autoFocusPassword = !this.isLoginEmpty();
        // const loginField = this.renderLoginField(this.state.loginType, !autoFocusPassword);

        // let loginType;
        // if (!SdkConfig.get().disable_3pid_login) {
        //     loginType = (
        //         <div className="mx_Login_type_container">
        //             <label className="mx_Login_type_label">{ _t('Sign in with') }</label>
        //             <Field
        //                 element="select"
        //                 value={this.state.loginType}
        //                 // onChange={this.onLoginTypeChange}
        //                 disabled={this.props.busy}
        //             >
        //                 <option key={LoginField.MatrixId} value={LoginField.MatrixId}>
        //                     { _t('Username') }
        //                 </option>
        //                 {/* <option
        //                     key={LoginField.Email}
        //                     value={LoginField.Email}
        //                 >
        //                     { _t('Email address') }
        //                 </option>
        //                 <option key={LoginField.Password} value={LoginField.Password}>
        //                     { _t('Phone') }
        //                 </option> */}
        //             </Field>
        //         </div>
        //     );
        // }

        return (
            <div>
                <form onSubmit={this.onSubmitForm}>
                    {/* { loginType } */}
                    {/* { loginField } */}
                    {/* <Field
                        id="mx_LoginForm_password"
                        className={pwFieldClass}
                        autoComplete="password"
                        type="password"
                        name="password"
                        label={_t('Password')}
                        value={this.state.password}
                        onChange={this.onPasswordChanged}
                        disabled={true}
                        autoFocus={autoFocusPassword}
                        onValidate={this.onPasswordValidate}
                        ref={field => this[LoginField.Password] = field}
                    /> */}
                    {/* { forgotPasswordJsx } */}
                    {/* <p>address:{this.state.address}</p> */}
                    { !this.props.busy && <input className="mx_Login_submit"
                        type="submit"
                        value={_t('Sign in')}
                        disabled={this.props.disableSubmit}
                    /> }
                </form>
            </div>
        );
    }
}
